<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', sans-serif;
        }
        
        .form-container {
            margin-top: 2.5rem;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
        }
        
        .form-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: #1a73e8;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 0.5rem;
        }
        
        .content-editor {
            min-height: 400px;
            resize: vertical;
        }
        
        .modal .modal-header {
            background-color: #f1f1f1;
        }
        
        .btn {
            border-radius: 6px;
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            .d-flex.flex-wrap {
                flex-direction: column;
            }
            
            .d-flex.flex-wrap button,
            .d-flex.flex-wrap a {
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
<div class="container form-container">
    <h2>发布新文章</h2>
    <form th:action="@{/api/articles}" method="post">
        <div class="mb-3">
            <label for="title" class="form-label">标题</label>
            <input type="text" class="form-control" id="title" name="title" required>
        </div>
        <!-- 内容编辑区 -->
        <div class="mb-3">
            <label for="content" class="form-label">内容</label>
            <textarea class="form-control" id="content" name="content" rows="10" required></textarea>
        </div>
        <!-- 分类下拉框 -->
        <div class="mb-3">
            <select class="form-select" id="category" name="categoryId" required>
                <option value="">请选择分类</option>
                <option th:each="category : ${categories}"
                        th:value="${category.categoryId}"
                        th:text="${category.name}"
                        th:attr="data-category-name=${category.name}">
                </option>
            </select>
            <div class="invalid-feedback">请选择一个分类</div>
        </div>
        <!-- 状态隐藏输入框 -->
        <input type="hidden" name="status" id="articleStatus" value="2">
        <!-- 分类字段保持原样，使用正确的参数名 -->

        <!-- 成功提示对话框 -->
        <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="successModalLabel">操作成功</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="successMessage">
                        操作成功！
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 错误提示对话框 -->
        <div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-danger" id="errorModalLabel">操作失败</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="errorMessage">
                        发生未知错误。
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="d-flex flex-wrap gap-3 pt-3">
            <!-- 保存草稿按钮 -->
            <button type="button" class="btn btn-outline-secondary d-flex align-items-center gap-2 px-4 py-2"
                    onclick="saveAsDraft()">
                <i class="bi bi-save"></i> 保存草稿
            </button>
            <!-- 发布按钮 -->
            <button type="button" class="btn btn-primary d-flex align-items-center gap-2 px-4 py-2"
                    onclick="submitForm()">
                <i class="bi bi-pencil-square"></i> 发布文章
            </button>
            <!-- 返回按钮 -->
            <a class="btn btn-outline-primary d-flex align-items-center gap-2 px-4 py-2"
                    th:href="@{/user/center}" title="返回用户中心">
                <i class="bi bi-arrow-left"></i> 返回
            </a>
        </div>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function showSuccessModal(message) {
        document.getElementById('successMessage').textContent = message;
        new bootstrap.Modal(document.getElementById('successModal')).show();
    }

    function showErrorModal(message) {
        document.getElementById('errorMessage').textContent = message;
        new bootstrap.Modal(document.getElementById('errorModal')).show();
    }

    // 保存草稿函数
    function saveAsDraft() {
        document.getElementById('articleStatus').value = '0'; // 设置为草稿状态
        const form = document.querySelector('form');
        form.action = '/api/articles'; // 明确设置表单提交地址
        form.method = 'POST'; // 明确设置提交方法
        form.submit();
    }

    // 提交表单函数
    function submitForm() {
        document.getElementById('articleStatus').value = '2'; // 设置为发布状态
        const form = document.querySelector('form');
        form.action = '/api/articles'; // 明确设置表单提交地址
        form.method = 'POST'; // 明确设置提交方法
        form.submit();
    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const urlParams = new URLSearchParams(window.location.search);
        const status = urlParams.get('status');
        const success = urlParams.get('success');

        if (success === 'true') {
            let message = status === '0' ? '草稿保存成功！' : '文章发布成功！';
            showSuccessModal(message);
        } else if (success === 'false') {
            showErrorModal('操作失败，请重试。');
        }
    });
</script>
<!--<script>-->
<!--    document.addEventListener("DOMContentLoaded", function () {-->
<!--        fetch("/api/categories")-->
<!--            .then(response => response.json())-->
<!--            .then(data => {-->
<!--                const categorySelect = document.getElementById("category");-->
<!--                data.forEach(category => {-->
<!--                    const option = document.createElement("option");-->
<!--                    option.value = category.categoryId;-->
<!--                    option.textContent = category.name;-->
<!--                    categorySelect.appendChild(option);-->
<!--                });-->
<!--            })-->
<!--            .catch(error => console.error("获取分类失败:", error));-->
<!--    });-->
<!--</script>-->
<!-- 引入 TinyMCE 富文本编辑器 -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#content',
        height: 400,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | bold italic backcolor | '
            + 'alignleft aligncenter alignright alignjustify | '
            + 'bullist numlist outdent indent | link image | '
            + 'code fullscreen',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
        // 增强编辑器外观
        skin: 'oxide',
        content_css: 'document',
        branding: false,
        statusbar: true
    });
</script>
</body>
</html>